<template>
  <div class="detail-container">
    <!-- 顶部统计卡片 -->
    <div class="content-card">
      <!-- 第一行统计数字 -->
      <div class="stats-row">
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">24292</div>
          <div class="stat-label">工会组织</div>
        </div>
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">109534</div>
          <div class="stat-label">覆盖企业</div>
        </div>
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">3576532</div>
          <div class="stat-label">会员总数</div>
        </div>
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">9518666</div>
          <div class="stat-label">工会干部</div>
        </div>
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">3</div>
          <div class="stat-label">建会率</div>
        </div>
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">2</div>
          <div class="stat-label">转化率</div>
        </div>
      </div>

      <!-- 第二行统计数字 -->
      <div class="stats-row">
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">4051</div>
          <div class="stat-label">覆盖社会组织</div>
        </div>
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">-</div>
          <div class="stat-label">本年度建会完成率</div>
        </div>
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">3550</div>
          <div class="stat-label">新北区会员数</div>
        </div>
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">-</div>
          <div class="stat-label">本年度增入会完成率</div>
        </div>
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">0</div>
          <div class="stat-label">活跃率</div>
        </div>
        <div class="stat-box">
          <div class="left-arrow"></div>
          <div class="right-arrow"></div>

          <div class="stat-value">0</div>
          <div class="stat-label">强组率</div>
        </div>
      </div>
    </div>

    <div class="body">
      <div class="body-left">
        <div class="charts-section">
          <!-- 左侧组织数图表 -->
          <a-card
            style="width: 100%"
            title=""
            :tab-list="tabList"
            :active-tab-key="orgTabKey"
            @tabChange="(key) => onTabChange(key, 'org')"
          >
            <template #customTab="item">
              {{ item.tab }}
            </template>
            <div class="chart-container">
              <div ref="orgChartContainer" class="chart-inner"></div>
            </div>
          </a-card>
          <a-card
            style="width: 100%"
            title=""
            :tab-list="memberTabList"
            :active-tab-key="memberTabKey"
            @tabChange="(key) => onTabChange(key, 'member')"
          >
            <template #customTab="item">
              {{ item.tab }}
            </template>
            <!-- 右侧会员数图表 -->
            <div class="chart-container">
              <div ref="memberChartContainer" class="chart-inner"></div>
            </div>
          </a-card>
        </div>

        <!-- 任务进度区域 -->
        <div class="progress-section">
          <!-- 建会任务进度 -->
          <div class="content-card progress-card">
            <div class="card-header">
              <div class="card-title">本年度建会任务进度</div>
            </div>
            <a-table
              bordered
              :columns="taskColumns"
              :data-source="buildTaskTableData"
              :pagination="false"
            />
          </div>
          <!-- 入会任务进度 -->
          <div class="content-card progress-card">
            <div class="card-header">
              <div class="card-title">本年度入会任务进度</div>
            </div>
            <a-table
              bordered
              :columns="taskColumns"
              :data-source="joinTaskTableData"
              :pagination="false"
            />
          </div>
        </div>
      </div>

      <div class="body-right">
        <!-- 表格区域 -->
        <div class="content-card">
          <div class="table-header">
            <div class="table-title">年度目标进度</div>
          </div>
          <a-table
            bordered
            :columns="columns"
            :data-source="tableData"
            :pagination="false"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import dayjs from "dayjs";
import { ApartmentOutlined } from "@ant-design/icons-vue";
import { Column } from "@antv/g2plot";

const currentArea = ref("海曙区总工会");
const selectedYear = ref(dayjs("2024"));
const orgChartType = ref("area");
const memberChartType = ref("area");

const orgChartContainer = ref<HTMLElement | null>(null);
const memberChartContainer = ref<HTMLElement | null>(null);
let orgChart: Column | null = null;
let memberChart: Column | null = null;
const orgTabKey = ref("tab1");
const memberTabKey = ref("tab1");
const noTitleKey = ref("app");

// 组织数图表数据
const areaOrgData = [
  { area: "海曙区", type: "覆盖企业数", value: 1600 },
  { area: "海曙区", type: "覆盖社会组织", value: 200 },
  { area: "海曙区", type: "覆盖新业态", value: 150 },
  { area: "江北区", type: "覆盖企业数", value: 200 },
  { area: "江北区", type: "覆盖社会组织", value: 100 },
  { area: "江北区", type: "覆盖新业态", value: 80 },
  { area: "镇海区", type: "覆盖企业数", value: 1200 },
  { area: "镇海区", type: "覆盖社会组织", value: 180 },
  { area: "镇海区", type: "覆盖新业态", value: 120 },
  { area: "北仑区", type: "覆盖企业数", value: 1800 },
  { area: "北仑区", type: "覆盖社会组织", value: 220 },
  { area: "北仑区", type: "覆盖新业态", value: 160 },
];

const industryOrgData = [
  { area: "机械工会", type: "覆盖企业数", value: 800 },
  { area: "机械工会", type: "覆盖社会组织", value: 120 },
  { area: "机械工会", type: "覆盖新业态", value: 90 },
  { area: "建筑工会", type: "覆盖企业数", value: 1200 },
  { area: "建筑工会", type: "覆盖社会组织", value: 150 },
  { area: "建筑工会", type: "覆盖新业态", value: 100 },
  { area: "教科工会", type: "覆盖企业数", value: 600 },
  { area: "教科工会", type: "覆盖社会组织", value: 80 },
  { area: "教科工会", type: "覆盖新业态", value: 60 },
];

const onTabChange = (value: string, type: string) => {
  if (type === "org") {
    orgTabKey.value = value;
    orgChart?.changeData(value === "tab1" ? areaOrgData : industryOrgData);
  } else if (type === "member") {
    memberTabKey.value = value;
    memberChart?.changeData(value === "tab1" ? areaMemberData : industryMemberData);
  }
};

const tabList = [
  {
    key: "tab1",
    tab: "县区级/园区组织数",
  },
  {
    key: "tab2",
    tab: "产业工会组织数",
  },
];
const memberTabList = [
  {
    key: "tab1",
    tab: "县区级/园区会员数",
  },
  {
    key: "tab2",
    tab: "产业工会会员数",
  },
];
// 会员数图表数据
const areaMemberData = [
  { area: "海曙", type: "男", value: 160000 },
  { area: "海曙", type: "女", value: 200000 },
  { area: "江北", type: "男", value: 0 },
  { area: "江北", type: "女", value: 0 },
  { area: "镇海", type: "男", value: 120000 },
  { area: "镇海", type: "女", value: 80000 },
  { area: "北仑", type: "男", value: 100000 },
  { area: "北仑", type: "女", value: 100000 },
];

const industryMemberData = [
  { area: "机械工会", type: "男", value: 80000 },
  { area: "机械工会", type: "女", value: 60000 },
  { area: "建筑工会", type: "男", value: 120000 },
  { area: "建筑工会", type: "女", value: 40000 },
  { area: "教科工会", type: "男", value: 90000 },
  { area: "教科工会", type: "女", value: 110000 },
];

// 任务进度表格列配置
const taskColumns = [
  {
    title: "工会名称",
    dataIndex: "name",
    width: "35%",
  },
  {
    title: "任务数",
    dataIndex: "total",
    align: "center",
  },
  {
    title: "已完成数",
    dataIndex: "completed",
    align: "center",
  },
  {
    title: "完成率",
    dataIndex: "rate",
    align: "center",
  },
];

// 建会任务表格数据
const buildTaskTableData = [

];

// 入会任务表格数据
const joinTaskTableData = [

];

onMounted(() => {
  // 初始化组织数图表
  if (orgChartContainer.value) {
    orgChart = new Column(orgChartContainer.value, {
      data: areaOrgData,
      isStack: true,
      xField: "area",
      yField: "value",
      seriesField: "type",
      columnWidthRatio: 0.1,
      legend: { position: "top" },
      color: ["#FF9F7F", "#37A2DA", "#67E0E3", "#FFDB5C"],
      tooltip: {
        formatter: (datum) => {
          return { name: datum.type, value: datum.value };
        }
      },
      yAxis: {
        grid: {
          line: {
            style: {
              stroke: '#E5E5E5',
              lineDash: [4, 4],
            },
          },
        },
      },
      xAxis: {
        line: {
          style: {
            stroke: '#E5E5E5',
          },
        },
      },
    });
    orgChart.render();
  }

  // 初始化会员数图表
  if (memberChartContainer.value) {
    memberChart = new Column(memberChartContainer.value, {
      data: areaMemberData,
      isStack: true,
      xField: "area",
      yField: "value",
      seriesField: "type",
      columnWidthRatio: 0.1,
      legend: { position: "top" },
      color: ["#37A2DA", "#FF9F7F"],
      tooltip: {
        formatter: (datum) => {
          return { name: datum.type, value: datum.value };
        }
      },
      yAxis: {
        grid: {
          line: {
            style: {
              stroke: '#E5E5E5',
              lineDash: [4, 4],
            },
          },
        },
        label: {
          formatter: (v) => {
            return (Number(v) / 1000).toFixed(0) + 'k';
          },
        },
      },
      xAxis: {
        line: {
          style: {
            stroke: '#E5E5E5',
          },
        },
      },
    });
    memberChart.render();
  }
});

onUnmounted(() => {
  orgChart?.destroy();
  memberChart?.destroy();
});

// 表格配置
const columns = [
  {
    title: "工会名称",
    dataIndex: "name",
    width: "35%",
  },
  {
    title: "转化率及以上比例(%)",
    dataIndex: "transformRate",
    align: "center",
  },
  {
    title: "活跃率及以上比例(%)",
    dataIndex: "activeRate",
    align: "center",
  },
  {
    title: "强组率及以上比例(%)",
    dataIndex: "strongRate",
    align: "center",
  },
];

const tableData = [
  { key: "1", name: "海曙区总工会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "2", name: "江北区总工会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "3", name: "镇海区总工会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "4", name: "北仑区总工会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "5", name: "鄞州区总工会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "6", name: "奉化区总工会", transformRate: "0.06", activeRate: "0.06", strongRate: "0.06" },
  { key: "7", name: "余姚市总工会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "8", name: "慈溪市总工会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "9", name: "宁海县总工会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "10", name: "象山县总工会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "11", name: "宁波新材料科技城工会联合会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "12", name: "宁波国家高新区工会联合会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "13", name: "市财贸金融工会委员会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "14", name: "市海洋渔业工会委员会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "15", name: "市文化工会委员会", transformRate: "-", activeRate: "-", strongRate: "-" },
  { key: "16", name: "市卫生工会委员会", transformRate: "-", activeRate: "-", strongRate: "-" }
];
</script>

<style scoped>
.detail-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.content-card {
  background: white;
  border-radius: 8px;
  background-color: transparent;
}

.header-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
}

:deep(.anticon-apartment) {
  color: #1877e4;
  font-size: 20px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.stats-row:last-child {
  margin-bottom: 0;
}

.stat-box {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  text-align: center;
  position: relative;
}
.left-arrow {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  border-top: 2px solid #556c8f;
  top: 0;
  border-left: 2px solid #556c8f;
}
.right-arrow {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  border-bottom: 2px solid #556c8f;
  bottom: 0;
  border-right: 2px solid #556c8f;
}
.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 8px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}
.body {
  width: 100%;
  display: flex;
  height: 75vh;
  gap: 10px;
  justify-content: space-between;
}
.body-left {
  width: 66.4%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height:100%;
}
.body-right {
  width: 34%;
  height:100%;
}
.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  height:48%;
  overflow:auto;
  min-height: 300px;
}

.chart-header {
  margin-bottom: 24px;
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
}

.chart-container {
  height: calc(100% - 46px); /* 减去tab的高度 */
  width: 100%;
  position: relative;
}

.chart-inner {
  height: 100%;
  width: 100%;
}

.table-header {
  margin-bottom: 16px;
}

.table-title {
  font-size: 16px;
  font-weight: bold;
}

:deep(.ant-radio-group) {
  width: 100%;
}

:deep(.ant-radio-button-wrapper) {
  width: 50%;
  text-align: center;
}

:deep(.ant-table-thead > tr > th) {
  background: #e9f0ff !important;
  font-weight: bold;
}

:deep(.ant-table-tbody > tr > td) {
  padding: 12px 8px;
}

.progress-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  height:48%;
  overflow: auto;
}

.progress-card {
  background: white !important;
  padding: 16px;
  overflow: hidden;
}

.card-header {
  margin-bottom: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.body-right .content-card {
  background: white !important;
  padding: 16px;
  height:100%;
  overflow:auto;
}

:deep(.ant-table-wrapper) {
  height: calc(100% - 40px);  /* 减去表头的高度 */
  display: flex;
  flex-direction: column;
}

:deep(.ant-spin-nested-loading) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.ant-spin-container) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.ant-table) {
  flex: 1;
}

:deep(.ant-table-container) {
  height: 100%;
}

:deep(.ant-table-body) {
  height: 100% !important;
  overflow-y: auto !important;
}

:deep(.ant-card) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.ant-card-body) {
  flex: 1;
  padding: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
